<template>
	<div class="search">
		<slot>
			<div class="title">
				<router-link to="choose">
					<img src="../../public/arrow_left.png" alt="">
				</router-link>
				<p class="users">添加地址</p>
			</div>
			<div class="add">
				<div class="lianxiren">
					<div class="ren">
						<p>
							联系人
						</p>
					</div>
					<div class="na">
						<input type="text" placeholder="你的名字" v-model="name" class="nas">
						<div class="sex">
							<div class="sex_left">
								<div class="men">
									<img src="../js/img/duihao0.png" alt="">
									<!-- <img src="../js/img/duihao1.png" alt=""> --> 
								</div>
								<span>先生</span>
							</div>
							<div class="sex_right">
								<div>
									<!-- <img src="../js/img/duihao0.png" alt="">
									<img src="../js/img/duihao1.png" alt=""> -->
								</div>
								<span>女士</span>
							</div>
						</div>
					</div>
				</div>
				<div class="dianhua">
					<div class="dianhua_left">
						<p>联系电话</p>
					</div>
					<input type="text" placeholder="您的手机号" v-model="phone" class="pb">
					<img src="../js/img/jh_l.png" alt="" @click="add">
					<input type="text" placeholder="备选电话" class="bx" v-model="phone_bk" v-show="as">
				</div>
				<div class="songcan">
					<div class="dizhi">
						<p>送餐地址</p>
					</div>
					<div class="dizhi_right">
						<router-link to="sa">
							<div class="xiaoqu">
								<p>{{names}}</p>
							</div>
						</router-link>
						<input type="text" placeholder="详细地址(如门牌号等)" v-model="address_detail">
					</div>
				</div>
				<div class="biaoqian">
					<div class="biaoqian_left">
						<p>标签</p>
					</div>
					<input type="text" placeholder="无/家/学校/公司" v-model="tag_type">
				</div>
			</div>
			<button @click="me" class="queding">确定</button>
			<div class="bj" v-show="isstatic">
				<div class="pop_up">
					<img src="../js/img/gantanhao.png" alt="" />
					<p>{{ test }}</p>
					<p class="sure" @click="sure">确认</p>
				</div>
			</div>
		</slot>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				//用户名字
				name: '',
				isstatic: false,
				//手机号
				phone: '',
				test: '',
				//地址详情
				address_detail: '',
				//标签
				tag_type: '',
				//备选电话
				phone_bk: '',
				names: '小区/写字楼或学校等',
				wu:true,
				xue:false,
			}
		},
		methods: {
			sure() {
				this.isstatic = false;
			},
			dengao(){
				this.wu = true;
				this.xue = false
			},
			shabi(){
				this.wu = false;
				this.xue = true
			},
			me: function() {
				let obj = this;
				let userid = this.$store.state.user_id;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/users/' + userid + '/addresses',
					method: 'post'
				}).then(function() {
					// window.console.log(obj.$store.state.user_id)
					if (obj.name == '') {
						obj.isstatic = true;
						obj.test = '请输入姓名'
						if (obj.phone == '') {
							obj.isstatic = true
							obj.test = '请输入电话号码'
						}
						if (obj.tag_type == '') {
							obj.isstatic = true
							obj.test = '详细地址'
						}
					}
					// window.console.log(11)
				}).catch(function(error) {
					window.console.log(error)
				});
			},
			add() {

			}
		},
		mounted() {
			let obj = this;
			obj.names = this.$route.query.name;
			// obj.address = this.$route.query.address;
		}

	}
</script>

<style scoped>
	.bj {
		width: 320px;
		height: 568px;
		background-color: rgba(0, 0, 0, 0);
		/* background-color: #000000; */
		position: fixed;
		top: 0;
		left: 0;
	}
	.pop_up {
		width: 240px;
		height: 158px;
		background: white;
		border-radius: 10px;
		top: 200px;
		left: 40px;
		position: fixed;
		text-align: center;
	}
	.pop_up img {
		height: 60px;
		width: 60px;
		margin-top: 20px;
		/* padding-top: 40px; */
	}
	.sure {
		width: 240px;
		height: 36px;
		line-height: 36px;
		color: white;
		background-color: #4cd964;
		border-radius: 5px;
		margin-top: 35px;
		font-size: 20px;
	}

	.test {
		display: inline-block;
		position: fixed;
		right: 10px;
		padding: 20px 20px;
	}

	.search {
		width: 320px;
		height: 568px;
		background-color: #F5F5F5;
	}

	.title {
		width: 320px;
		height: 39px;
		background-color: #007AFF;
		line-height: 39px;
		text-align: center;
	}

	.title img {
		width: 30px;
		height: 35px;
		float: left;
		margin-left: 10px;
		margin-top: 5px;
	}

	.users {
		font-size: 16px;
		color: white;
	}

	.add {
		width: 320px;
		height: 303px;
		background-color: white;
		/* text-align: center; */
	}

	.lianxiren {
		width: 292px;
		height: 101px;
		/* background-color: pink; */
		margin: 0 auto;
		display: flex;
		border-bottom: 1px solid gainsboro;
	}

	.ren {
		width: 83.42px;
		height: 100.5px;
		/* background-color: black; */
		font-size: 14px;
	}

	.ren p {
		margin-top: 10px;
	}

	.na {
		width: 208.58px;
		height: 100.5px;
		/* background-color: #000066; */
	}

	.nas {
		width: 208px;
		height: 50px;
		border: none;
		outline: none;
		color: #999999;
		border-bottom: 1px solid gainsboro;
	}

	.sex {
		width: 208px;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		display: flex;
	}
	.men{
		width: 16px;
		height: 16px;
		border: 1px solid gainsboro;
	}
	.sex_left{
		width: 104px;
		height: 50px;
		background-color: pink;
		line-height: 50px;
	}
	.sex_right{
		width: 104px;
		height: 50px;
		background-color: chocolate;
	}


	.dianhua {
		width: 292px;
		height: 50px;
		margin: 0 auto;
		/* background-color: pink; */
		display: flex;
		border-bottom: 1px solid gainsboro;
		position: relative;
	}

	.dianhuati {
		width: 292px;
		height: 100px;
		margin: 0 auto;
		/* background-color: pink; */
		display: flex;
		border-bottom: 1px solid gainsboro;
		position: relative;
	}

	.dianhua_left {
		width: 83px;
		height: 50px;
		/* background-color: brown; */
		line-height: 50px;
		font-size: 14px;
		position: absolute;
	}

	.dianhualeft {
		width: 83px;
		height: 100px;
		/* background-color: brown; */
		line-height: 50px;
		font-size: 14px;
		position: absolute;
	}

	.pb {
		width: 188px;
		height: 50px;
		border: none;
		outline: none;
		position: absolute;
		right: 15px;
	}

	.bx {
		width: 208px;
		height: 50px;
		background-color: #FFFFFF;
		font-size: 14px;
		display: none;
		position: absolute;
		margin-bottom: 0;
		margin-top: 50px;
		border: none;
		outline: none;
		right: 0;
	}

	.dianhua img {
		width: 20px;
		height: 20px;
		margin-top: 13px;
		position: absolute;
		right: 5px;
	}

	.songcan {
		width: 292px;
		height: 101px;
		/* background-color: pink; */
		margin: 0 auto;
		border-bottom: 1px solid gainsboro;
		display: flex;
	}

	.dizhi {
		width: 83px;
		height: 100.5px;
		/* background-color: palegreen; */
	}

	.dizhi_right {
		width: 208px;
		height: 100px;
		/* background-color: lavenderblush; */
	}

	.xiaoqu {
		width: 208px;
		height: 50px;
		/* background-color: darkgray; */
		line-height: 50px;
		font-size: 14px;
		color: #999999;
		border-bottom: 1px solid gainsboro;
	}

	.dizhi_right input {
		width: 208px;
		height: 50px;
		border: none;
		outline: none;
		font-size: 14px;
	}

	.dizhi p {
		text-align: center;
		width: 83px;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
	}

	.biaoqian {
		width: 292px;
		height: 50px;
		/* background-color: pink; */
		margin: 0 auto;
		display: flex;

	}

	.biaoqian_left {
		width: 83px;
		height: 50px;
		/* background-color: deeppink; */
		line-height: 50px;
		text-align: center;
		font-size: 14px;
	}

	.biaoqian input {
		width: 208px;
		height: 50px;
		border: none;
		outline: none;
		font-size: 14px;
	}

	.queding {
		width: 292px;
		height: 36px;
		border: none;
		outline: none;
		color: white;
		font-size: 14px;
		background-color: #4CD964;
		border-radius: 5px;
		margin-top: 10px;
		margin-left: 10px;
	}
</style>
